<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>有偿收费</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/iconfont.css" />
    <link rel="stylesheet" type="text/css" href="css/comm.css" />
    <link rel="stylesheet" type="text/css" href="css/form.css" /> 
    <link rel="stylesheet" type="text/css" href="css/editStyle.css" />
    <link rel="stylesheet" type="text/css" href="../script/vant/index.css" />
    <style>
        .mainbox{
            padding-top: 5px;
            padding-bottom: 15px;
        }
      .new-vant-stepper .van-stepper{
        display: flex;
        justify-content: flex-end;
      }
      .popup-title{
            padding: 20px 20px 10px 20px;
            text-align: center;
            border-bottom: solid 1px #f0f0f0;
            color: #999;
        }
        .new-popup-btn{
            width: 100px;
            border: solid 1px #289FFF;
        }
        .popup-content{
            display: flex;align-items: center;
            padding: 10px 0;
        }
        .popup-content span{
            width: 80px;font-weight: bold;
        }
        .popup-content input{
            border: solid 0.5px #ddd;
            border-radius: 6px;
            padding: 0 10px;
            height: 40px;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <div class="aui-content boxarea mainbox ">
            <div class="aui_formbox">
                <div v-for="(item,index) in list" class="aui-padded-t-10 aui-padded-b-10" v-bind:class="{'border-bottomLine':index<list.length-1}">
                    <div class="aui-margin-b-5">
                        <div style="width: 95%;display: inline-block;">{{item.ItemName}}</div>
                       <span style="float: right;"> <van-icon @click="doChargeRemove(item.ID)" name="delete-o" /></span>
                    </div>
                    <div class="aui-font-size-12 aui-margin-b-5">
                        <van-row justify="space-between">
                            <van-col span="12" class="text-grey">人工费：{{item.ManUnitPrice}} X {{item.ManNumber}}={{item.ManUnitPrice * item.ManNumber}}</van-col>
                            <van-col span="12" class="text-red text-right new-vant-stepper" >
                                <van-stepper v-model="item.ManNumber" @change="doChangeNumber(item)" min="0" input-width="40px" button-size="18px" integer />
                            </van-col>
                          </van-row>
                    </div>
                    <div class="aui-font-size-12">
                        <van-row justify="space-between">
                            <van-col span="12" class="text-grey">材料费：{{item.ItemUnitPrice}} X {{item.ItemNumber}}={{item.ItemUnitPrice * item.ItemNumber}}</van-col>
                            <van-col span="12" class="text-red text-right new-vant-stepper">
                                <van-stepper v-model="item.ItemNumber" @change="doChangeNumber(item)" min="0" input-width="40px" button-size="18px" integer />
                            </van-col>
                          </van-row>
                    </div>
                    <div class="aui-font-size-14 aui-margin-t-0">
                        <span>小计：￥{{item.TotalPrice}}</span>
                        <span v-if="IsEditTotalCost" class="aui-margin-l-5"><van-icon v-on:click="do_editcost(item)" name="edit" /></span>
                    </div>
                </div>
                <div class="" > 
                    <van-row justify="space-between">
                        <van-col span="12" class="text-grey">共计<label class="text-blue aui-margin-l-5 aui-margin-r-5" style="font-weight: 600;"> {{list.length}}</label>项费用</van-col>
                        <van-col span="12" class="text-red text-right">￥<span style="font-weight: 600;">{{sum}}</span></van-col>
                      </van-row>
                </div>
                
            </div>
        </div>
        <div class="aui-margin-t-15" style="text-align: center;padding-bottom: 80px;"><label @click="open_shoufei()"
                class="text-blue">
                <van-icon name="plus" class="aui-margin-r-10" />添加收费项目
            </label></div>
        <div class="aui_bottom">
            <div class="aui_bottombtn" v-on:click="do_save()">确认创建</div>
        </div>


         <!--弹出更改应收金额-->
         <van-popup v-model:show="IsShowEditCost" round  closeable :style="{width: '80%' }">
            <div style="padding-bottom: 30px;">
                <div class="popup-title">应收金额变更</div>
                <div class="aui-padded-15">
                    <div class="text-grey aui-font-size-12">说明：请输入实际应收金额</div>
                    <div class="popup-content"><span >人工费</span> <input  v-model="selectform.FactManPrice" type="number" placeholder="请填写"></div>
                    <div class="popup-content"><span >材料费</span> <input  v-model="selectform.FactItemPrice" type="number" placeholder="请填写"></div>
                </div>
                <div style="text-align: center;">
                    <label v-on:click="do_editcost_cancel()" class="aui_bottombtn new-popup-btn aui-margin-r-10" style="background: #fff;color: #289FFF;" >取消</label>
                    <label v-on:click="do_editcost_ok()" class="aui_bottombtn new-popup-btn" >确定</label>
                </div>
            </div>
        </van-popup>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/aui-toast.js"></script>
<script type="text/javascript" src="../script/aui-dialog.js"></script>
<script type="text/javascript" src="../script/aui-actionsheet.js"></script>
<script type="text/javascript" src="../script/config.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/vue.js"></script>
<script type="text/javascript " src="../script/vant/vue.js"></script>
<script type="text/javascript " src="../script/vant/vant.js"></script>
<script type="text/javascript" src="js/renwugongdan_addfee_new.js"></script>

</html>
